<template>
  <div id="FinancialInformation">
    <div class="list-div" v-if="show">
      <ul class="list-ul">
        <li v-for="(item, index) in news_list" :key="'finacial_' + index">
          <router-link :to="{path:'/EconomicTrade/FinancialInformation/NewsInfo', query:item}" class="news-link">
            <span v-html="item.title" :title="item.title"></span>
          </router-link>
          <span>【{{item.createDate | getTime}}】</span>
        </li>
      </ul>
    </div>
    <div class="pageInfo" v-if="show">
       <Page class="page-list" :total="countNum" show-total :current="curPageIndex" :page-size="pageSize" @on-change="changeHandle"></Page>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import baseConfig from "../../publicLib/baseConfig/baseConfig";
import {Storage} from '../../publicLib/utils-lib/main'

let localStorage = new Storage('localStorage');

export default {
  name: 'FinancialInformation',
  data () {
    return {
      news_list: [],//baseConfig.financial_news,
      curPageIndex: 1,
      countPage: 10,
      countNum: 100,
      pageSize: 4,
      show: true
    }
  },
  filters: {
    getTime: function (value) {
      return value.split(' ')[0]
    }
  },
  watch: {
    /* 监听路由 */
    $route (to, from) {
      if (to.name === 'FinancialInformation') {
        this.show = true;
      }
      else{
        this.show = false;
      }

      // 缓存当前页
      localStorage.setItem('FinancialInformationShow', this.show)
    }
  },
  methods: {
    getNewsList (index) {
      this.$fetch('newslist', {newstypes: '12',pageNo: index})
        .then(response => {
            //成功获取服务器数据
            if (response.code === "200") {
              let data = response.data;
              this.curPageIndex = data.pageNo;
              this.countPage = data.page_num;
              this.countNum = data.count;
              this.pageSize = data.pageSize;

              this.news_list = [];
              let ary = data.list;
              let len = ary.length;

              for (let i = 0; i < len; i++) {
                this.news_list.push(ary[i]);
              }
            }
          }
        )
    },
    /* 分页改变事件 */
    changeHandle (curIndex) {
       this.curPageIndex = curIndex;
       this.getNewsList(curIndex);
    }
  },
  mounted () {
    this.getNewsList(this.curPageIndex);
    /* 如果现实的是详情页面，刷新浏览器仍然显示详情页 */
    let show = localStorage.getItem('FinancialInformationShow');

    if (show === 'false') {
      this.show = false;
    }
  },
  destroyed () {
    localStorage.removeItem('FinancialInformationShow')
  }
}
</script>

<style lang="scss" scoped>
  @import 'publicLib/scss/defualtScss.scss';

 #FinancialInformation{
   width: 100%;
   font-size: 1rem;

    .list-div{
      width: 95%;
      margin: 0 auto;
      text-align: left;
      font-size: 1rem;

      .list-ul{
        margin: 2rem 0;
        height:22.5rem;

        li{
          width: 90%;
          line-height: 2rem;
          border-bottom: #D6D6D6 0.09rem dashed;
          list-style-type: square;

          .news-link{
            span{
              width: 80%;
              display: block;
              color: $data-detail-font-color;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              float: left;
            }
          }

          &:hover{
            cursor: pointer;

            span, a{
              color: $default-layout-color;
            }
          }
        }

        span{
          float: right;
        }
      }
    }

   .pageInfo{
     .page-list{
       float: right;
       margin-right: 1rem;
     }
   }
 }
</style>
